<?php
$ssFilter = $this->_arrParam['ssFilter'];
$num_event_day = empty($this->_arrParam['event_day']) ? 0 : $this->_arrParam['event_day'][0]['mem_count'];
$num_member_day = empty($this->_arrParam['member_day']) ? 0 : $this->_arrParam['member_day'][0]['mem_count'];
$num_event_week = empty($this->_arrParam['events_week']) ? 0 : $this->_arrParam['events_week'][0]['mem_count'];
$num_member_week = empty($this->_arrParam['member_week']) ? 0 : $this->_arrParam['member_week'][0]['mem_count'];
$num_event_month = empty($this->_arrParam['events_month']) ? 0 : $this->_arrParam['events_month'][0]['mem_count'];
$num_member_month = empty($this->_arrParam['member_month']) ? 0 : $this->_arrParam['member_month'][0]['mem_count'];
$linkSelected = $this->createUrl('default/filters?type=search&key=1');
$slkSelect[7] = 'Week';
$slkSelect[30] = 'Month';
$date_from = CHtml::textField('date_from', empty($ssFilter['date_from']) ? NULL : $ssFilter['date_from'], array('autocomplete' => 'off', 'placeholder' => 'Enter date from', 'class' => 'datepicker form-control', 'style' => 'width:200px'));
$date_to = CHtml::textField('date_to', empty($ssFilter['date_to']) ? NULL : $ssFilter['date_to'], array('autocomplete' => 'off', 'placeholder' => 'Enter date to', 'class' => 'datepicker form-control', 'style' => 'width:200px'));
$linkSearch = $this->createUrl('default/filters?type=search&key=1');
$linkResetSearch = $this->createUrl('default/filters?type=search&key=0');
$buttonSearch = Chtml::button('Search', array('onclick' => "OnSubmitForm('" . $linkSearch . "')", 'name' => 'search-now', 'class' => 'btn blue', 'style' => 'margin:0px 10px 0px 0px'));
$buttonReset = CHtml::button('Clear', array('onclick' => "OnSubmitForm('" . $linkResetSearch . "')", 'class' => 'btn blue', 'style' => 'margin:0px 10px 0px 0px'));
$strSeach = $date_from . $date_to . $buttonSearch . $buttonReset;
$select_date = CHtml::dropDownList('select_date', $slkSelect, $slkSelect, array('empty' => '--Select a type--', 'options' => array(empty($ssFilter['select_date']) ? null : $ssFilter['select_date'] => array('selected' => 'selected')), 'id' => FALSE, 'style' => 'width:200px', 'class' => 'form-control'));
?>
<!-- BEGIN SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<div class="modal fade" id="portlet-config" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                Widget settings form goes here
            </div>
            <div class="modal-footer">
                <button type="button" class="btn blue">Save changes</button>
                <button type="button" class="btn default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- END SAMPLE PORTLET CONFIGURATION MODAL FORM-->
<!-- BEGIN PAGE HEADER-->
<div class="row">
    <div class="col-md-12">              
        <ul class="page-breadcrumb breadcrumb">
            <li>
                <i class="icon-home"></i>
                <a href="index.html">Home</a>
                <i class="icon-angle-right"></i>
            </li>
            <li><a href="#">Dashboard</a></li>
            <li class="pull-right">
                <div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change dashboard date range">
                    <i class="icon-calendar"></i>
                    <span></span>
                    <i class="icon-angle-down"></i>
                </div>
            </li>
        </ul>
        <!-- END PAGE TITLE & BREADCRUMB-->
    </div>
</div>
<!-- END PAGE HEADER-->
<!-- BEGIN DASHBOARD STATS -->
<div class="row">
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat blue">
            <div class="visual">
                <i class="icon-comments"></i>
            </div>
            <div class="details">
                <div class="number">
                    <table class='view_em'>
                        <tr><th>Sự kiện mới</th><td><?php echo $num_event_day ?></td></tr>
                        <tr><th>Thành viên mới</th><td><?php echo $num_member_day; ?></td></tr>
                    </table>                                        
                </div>
                <div class="desc">
                    Today
                </div>
            </div>
            <a class="more" href="<?php echo Yii::app()->createUrl('/Dashboard/default/index'); ?>">
                View more <i class="m-icon-swapright m-icon-white"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat green">
            <div class="visual">
                <i class="icon-shopping-cart"></i>
            </div>
            <div class="details">
                <div class="number">
                    <table class='view_em'>
                        <tr><th>Sự kiện mới </th><td><?php echo $num_event_week ?></td></tr>
                        <tr><th>Thành viên mới</th><td><?php echo $num_member_week; ?></td></tr>
                    </table> 
                </div>
                <div class="desc">This Week</div>
            </div>
            <a class="more" href="<?php echo Yii::app()->createUrl('/Dashboard/default/week'); ?>">
                View more <i class="m-icon-swapright m-icon-white"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat purple">
            <div class="visual">
                <i class="icon-globe"></i>
            </div>
            <div class="details">
                <div class="number">
                    <table class='view_em'>
                        <tr><th>Sự kiện mới</th><td><?php echo $num_event_month ?></td></tr>
                        <tr><th>Thành viên mới</th><td><?php echo $num_member_month; ?></td></tr>
                    </table> 
                </div>
                <div class="desc">This Month</div>
            </div>
            <a class="more" href="<?php echo Yii::app()->createUrl('/Dashboard/default/month'); ?>">
                View more <i class="m-icon-swapright m-icon-white"></i>
            </a>
        </div>
    </div>
    <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
        <div class="dashboard-stat yellow">
            <div class="visual">
                <i class="icon-bar-chart"></i>
            </div>
            <div class="details">
                <div class="number">
                    <table class='view_em'>
                        <tr><th>Sự kiện mới</th><td><?php echo $num_event_day ?></td></tr>
                        <tr><th>THành viên mới</th><td><?php echo $num_member_day; ?></td></tr>
                    </table> 
                </div>
                <div class="desc">New Members</div>
            </div>
            <a class="more" href="<?php echo Yii::app()->createUrl('/Dashboard/default/member'); ?>">
                View more <i class="m-icon-swapright m-icon-white"></i>
            </a>
        </div>
    </div>
</div>
<!-- END DASHBOARD STATS -->
<div class="clearfix"></div> 
<div class="row">
    <div class="col-md-12">
        <div class="portlet-body">
            <div id="orders-grid">
                <div id="member" style="height:300px; width:100%; "></div>            
            </div>            
        </div>     
    </div>        
</div>
<div class="row">
    <div class="col-md-12"><p style="width: 100%; border: 2px saddlebrown solid;margin: 20px 0px 0px 0px;" ></p></div>        
</div>	
<div class="row">
    <div class="col-md-12">
        <div class="portlet-body">
            <div id="orders-grid">
                <div id="event" style="height:300px; width:100%; padding: 10px; margin: 20px 0px 50px 0px;"></div>
            </div>            
        </div>
    </div>        
</div>	 
<?php
$max = 0;
$max_vent = 0;
foreach ($item_member as $key => $value) {
    $max = $max > (int) $value ? $max : (int) $value;
    $data_member[] = array($key => (int) $value);
}
foreach ($item_event as $key => $value) {
    $data_event[] = array($key => (int) $value);
    $max_vent = $max_vent > (int) $value ? $max_vent : (int) $value;
}
$member = json_encode($data_member);
$member = str_replace('}', ']', $member);
$member = str_replace('{', "[", $member);
$member = str_replace('"', "'", $member);
$member = str_replace(':', ",", $member);
$event = json_encode($data_event);
$event = str_replace('}', ']', $event);
$event = str_replace('{', '[', $event);
$event = str_replace('"', "'", $event);
$event = str_replace(':', ",", $event);
?>
<div class="clearfix"></div>
<script>
    $(document).ready(function() {
        $(function() {
            $(".datepicker").datepicker({
                dateFormat: 'yy-mm-dd',
                changeMonth: true,
                changeYear: true
            });
        });
        var member = <?php echo $member ?>;
        console.log(member);
        var event = <?php echo $event ?>;
        console.log(event);
        var plot_option = function(pageview, seriesColors, max, numberTicks, render) {
            return {
                title: pageview,
                series: [
                    {
                        markerOptions: {style: 'circle', size: 10},
                        lineWidth: 2
                    }
                ],
                axes: {
                    xaxis: {
                        autoscale: true,
                        renderer: render,
                        tickOptions: {
                            formatString: '%Y/%m/%d',
                            showGridline: false
                        },
                        tickInterval: "1 days",
                    },
                    yaxis: {
                        min: 0,
                        max: max,
                        numberTicks: numberTicks,
                        tickOptions: {
                            formatString: '%.1f'
                        }
                    }
                },
                // seriesColors: ["rgba(202,97,133,1)", "rgba(236,108,155,0.9)", "#EC6C9B"],
                seriesColors: seriesColors,
                seriesDefaults: {
                    shadow: false,
                    markerOptions: {
                        shadow: false
                    },
                    rendererOptions: {
                        // animation: {
                        // 	show: true
                        // }
                    }
                },
                grid: {
                    shadow: false,
                    drawGridLines: false,
                    gridLineColor: '#cccccc', // *Color of the grid lines.
                    background: 'white', // CSS color spec for background color of grid.
                    borderColor: '#999999', // CSS color spec for border around grid.
                    borderWidth: 0.0           // pixel width of border around grid.
                },
                axesDefaults: {
                    rendererOptions: {
                        baselineWidth: 1.5,
                        baselineColor: '#444444',
                        drawBaseline: false
                    }
                },
                highlighter: {
                    show: true,
                    sizeAdjust: 8.5
                },
            }
        }
        var plot1 = $.jqplot('member', [member], plot_option(
                "Members",
                ["rgba(202,97,133,1)", "rgba(236,108,155,0.9)", "#EC6C9B"],
<?php echo ceil($max * 1.5) ?>,
                5,
                $.jqplot.DateAxisRenderer
                ));
        var plot2 = $.jqplot('event', [event], plot_option(
                "Events",
                ["rgba(202,97,133,1)", "rgba(236,108,155,0.9)", "#EC6C9B"],
<?php echo ceil($max_vent * 1.5) ?>,
                5,
                $.jqplot.DateAxisRenderer
                ));
    });
</script>